<template>
  <div>
    <div v-if="defaultTip">
      <div
        v-if="settingConfig?.submitShowType === 2"
        v-html="settingConfig?.submitShowCustomPageContent"
      />
      <el-result
        class="result-wrapper"
        v-else
        icon="success"
        :title="$t('rform.submitResult.submitSuccess')"
      >
      <template #icon>
        <svg t="1747290995926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="52717" width="48" height="48"><path d="M488.8762 537.692191h-240.586303a46.07531 46.07531 0 0 1 0-92.130402h266.181451a44.579227 44.579227 0 0 1 40.940106 30.710134 349.011878 349.011878 0 0 1 179.166035-51.190296 322.20369 322.20369 0 0 1 168.936062 46.07531V189.590094c0-51.190296-51.190296-97.265605-107.495577-97.265606H591.256791a125.974223 125.974223 0 0 0-122.860753-92.150619 121.7488 121.7488 0 0 0-122.860753 92.150619H140.774102C79.353834 92.324488 28.163539 133.284812 28.163539 189.590094v701.319181c0 51.190296 51.190296 97.265605 107.495577 97.265605h353.217084a349.052312 349.052312 0 0 1-86.934547-220.126358 329.86606 329.86606 0 0 1 86.934547-230.356331z m-15.365176-435.117513a46.07531 46.07531 0 1 1-46.075309 46.075309c-5.114986-25.595148 15.365176-46.07531 46.075309-46.075309z m-235.471316 189.396007H668.042235a46.07531 46.07531 0 0 1 0 92.130402H238.039708a47.530958 47.530958 0 0 1 0-92.130402z m0 0" fill="#cacaf3" p-id="52718" data-spm-anchor-id="a313x.search_index.0.i51.4b1f3a8156SzGF" class=""></path><path d="M734.577489 501.846854a261.066464 261.066464 0 1 0 261.066464 261.066464 258.90321 258.90321 0 0 0-261.066464-261.066464z m127.975739 204.761182l-127.975739 143.340915s-15.344958 20.480162-25.595148 15.344959c-10.25019 0-97.265605-81.90043-97.265605-81.90043s-10.229972-20.480162 5.114986-30.710134c5.114986-5.114986 10.229972-10.229972 30.710134-5.114986l61.420267 51.190296 122.860754-122.860754s15.365176-10.229972 25.595147 0 5.114986 30.710134 5.114987 30.710134z m0 0" fill="#9e9ef1" p-id="52719" data-spm-anchor-id="a313x.search_index.0.i52.4b1f3a8156SzGF" class=""></path></svg>
      </template>
      </el-result>
    </div>
    <div v-else>
      <el-result icon="success">
        <template #extra>
          <div
            style="margin: 0 auto"
            v-html="tipTitle"
          ></div>
        </template>
      </el-result>
    </div>
    <div class="content">
      <!-- 考试分数-->
      <div
        v-if="resultData.examScoreText && settingConfig?.examSettings?.showScoreText"
        class="text-center"
      >
        {{ resultData.examScoreText }}
      </div>
      <!--    随机编号-->
      <div
        v-if="resultData.randomNumberText"
        class="text-center mb10"
      >
        {{ resultData.randomNumberText }}
        <el-button
          v-copyText="resultData.randomNumberText"
          class="pl5"
          link
          type="primary"
        >
          {{ $t("rform.answerResult.copy") }}
        </el-button>
      </div>
      <!--    核销码-->
      <div
        v-if="resultData.confirmationCodeInfo"
        class="text-center"
      >
        <confirmation-code-view
          :form-key="formKey"
          :desc-text="resultData.confirmationCodeInfo.descText"
          :type="resultData.confirmationCodeInfo.type"
          :code="resultData.confirmationCodeInfo.code"
        />
      </div>
      <!--    查看排名和解析-->
      <div
        class="flex-center mt5"
        @click="handleToExamResult"
      >
        <!--		考试按钮-->
        <el-button
          v-if="settingConfig?.examSettings?.enableViewAnswer"
          @click="handleToExamResult"
          type="primary"
        >
          {{ $t("rform.submitResult.viewRankAnswer") }}
        </el-button>
      </div>
      <!--    查看提交内容-->
      <div
        class="mt5 flex-center"
        style="text-align: center"
        @click="handleToAnswerResult"
      >
        <el-button
          v-if="settingConfig?.showSubmitContentBtn"
          @click="handleToAnswerResult"
          type="primary"
        >
          {{ $t("rform.submitResult.viewSubmitContent") }}
        </el-button>
      </div>
      <!--    再次填写-->
      <div
        class="mt5 flex-center"
        style="text-align: center"
        @click="handleAgainWrite"
      >
        <el-button
          v-if="settingConfig?.enableAgainWrite"
          @click="handleAgainWrite"
          type="primary"
        >
          {{ $t("rform.submitResult.againWrite") }}
        </el-button>
      </div>
      <!--    参与抽奖-->
      <div class="mt5 text-center flex-center">
        <el-button
          v-if="hasLottery && redPacketOpened"
          type="primary"
          @click="handleToLottery"
        >
          {{ $t("rform.submitResult.participateInLottery") }}
        </el-button>
      </div>
      <!--    测评结果-->
      <div
        class="mt5 flex-center"
        style="text-align: center"
        @click="handleToEvaluationResult"
      >
        <el-button
          v-if="settingConfig?.enableEvaluationResult"
          @click="handleToEvaluationResult"
          type="primary"
        >
          {{ $t("rform.submitResult.evaluationResult") }}
        </el-button>
      </div>
      <RedPacket
        v-if="hasRedPacket"
        :data-id="props.resultData.dataId"
        :source-id="props.formKey"
        :source-type="'FORM_WX_RAD_PACK'"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { jumpUrl, logicJumpResult } from "@/views/form/write/hooks/SubmitJump";
import { useRouter } from "vue-router";
import { checkRedPacketEligibility, getActivitiesByTimeRange } from "@/api/project/lottery";
import ConfirmationCodeView from "@/views/formgen/components/FormItem/ConfirmationCode/CodeView.vue";
import RedPacket from "./RedPacket.vue";
import { FormPublicSetting } from "@/views/formgen/components/GenerateForm/types/form";

interface ResultData {
  // 数据Id 自增
  id: number;
  // 数据Id 唯一
  dataId: string;
  // 考试Id
  examId: string;
  randomNumberText: string;
  examScoreText: string;
  confirmationCodeInfo: {
    descText: string;
    type: string;
    code: string;
  };
}

interface Props {
  resultData?: ResultData;
  formKey?: string;
  settingConfig?: FormPublicSetting;
  formData?: Record<string, any>;
}

const props = withDefaults(defineProps<Props>(), {
  resultData: () => ({}) as ResultData,
  formKey: "",
  settingConfig: () => ({}) as FormPublicSetting,
  formData: () => ({})
});

const defaultTip = ref(true);
const tipTitle = ref();

const router = useRouter();

const handleToExamResult = () => {
  router.push({
    path: "/exam/result/" + props.resultData?.examId
  });
};

const handleToAnswerResult = () => {
  router.push({
    path: "/form/answer/result",
    query: {
      id: props.resultData?.dataId
    }
  });
};

const handleAgainWrite = () => {
  // 刷新页面
  const href = window.location.href;
  if (href.indexOf("?") > -1) {
    window.location.href = href + "&reWrite=true";
  } else {
    window.location.href = href + "?reWrite=true";
  }
};

const handleToLottery = () => {
  router.push({
    path: "/form/lottery",
    query: {
      id: props.resultData?.dataId,
      key: props.formKey
    }
  });
};

const handleToEvaluationResult = () => {
  const href = router.resolve({
    path: "/form/dimension/result",
    query: {
      key: props.resultData?.dataId
    }
  });
  window.open(href.href, "_blank");
};

// 是否有抽奖
const hasLottery = ref(false);
const hasRedPacket = ref(false);
const redPacketOpened = ref(false);

onMounted(() => {
  // 有动态逻辑设置的话先执行那个
  if (props.settingConfig?.commitJumpLogicList) {
    // 合并返回值和表单数据
    const data = { ...props.formData, ...props.resultData };
    let jumpResult = logicJumpResult(props.settingConfig.commitJumpLogicList, data);
    if (jumpResult && Object.keys(jumpResult).length > 0) {
      // 文字提示
      if (jumpResult.promptJumpType === "prompt") {
        tipTitle.value = jumpResult.promptJumpContent;
        defaultTip.value = false;
      } else {
        jumpUrl(jumpResult.promptJumpContent, data);
      }
    }
  }
  //  跳转到指定页面
  if (props.settingConfig?.submitJump) {
    jumpUrl(props.settingConfig.submitJumpUrl, props.resultData);
  }
  // 抽奖
  getActivitiesByTimeRange("FORM_LOTTERY", props.formKey).then(res => {
    if (res.data) {
      hasLottery.value = true;
    }
  });
  // 微信红包 数据id
  checkRedPacketEligibility("FORM_WX_RAD_PACK", props.formKey, props.resultData.dataId).then(res => {
    if (res.data) {
      hasRedPacket.value = true;
    }
  });
});
</script>

<style lang="scss" scoped>
.result-wrapper {
  :deep(.el-result__title p){
    font-size: 16px !important;
    font-weight: 500!important;
  }
}
@media (max-width: 768px) {
}

.fa-text {
  width: 250px;
}

.content {
  padding: 10px 50px 0 50px;
}
</style>
